<template>
	<div id="song-rank">
	  <Rankfeature :rankfeature="rankfeature" v-if="rankfeature.length !== 0" />
	  <Rankglobal :rankglobal="rankglobal" v-if="rankglobal.length !== 0" />
	</div>
  </template>
  
  <script setup>
  // 网络请求
  import { getAllRank } from "@/network/recommend/songrank";
  
  // 子组件
  import Rankfeature from "./Childcomps/Rankfeature";
  import Rankglobal from "./Childcomps/Rankglobal";
  

  import { ref, onMounted } from "vue";
  

  const rankfeature = ref([]);
  const rankglobal = ref([]);
  

  onMounted(async () => {
	try {
	  const res = await getAllRank();
	  // 处理榜单数据，分为两个数组
	  const allRankInfo = res.data.list;
	  rankfeature.value = allRankInfo.slice(0, 4);
	  rankglobal.value = allRankInfo.slice(4);
	} catch (error) {
	  console.error("Failed to fetch rank data", error);
	}
  });
  </script>
  
  <style lang="less" scoped>

  </style>
  